<template>
    <div class="popProject-select">
        <searchBoxAll
            :searchform="searchform2"
            :search_type_data="search_type_data"
            :preselection_list="preselection_list"
            :placeholder="select_name"
            :resultTips_list="resultTips_list"
            :customer_list_data="customer_list_data"
            :top_num="top_num_search"
            :total="total_num"
            @cheSelectvalue="cheSelectvalue"
            @showSelectFun="showSelectFun"
            @preselectionFun="preselectionFun"
            @resultTipsFun="resultTipsFun"
            @determineFun="cheproject"
            @inputFun="inputFun"
            @closeFun="closeFun"
            @loadFun="searchloadFun"
            @accountLogin="accountLogin"
            ref="searchBoxAll"
        ></searchBoxAll>
        <filters
            ref="filtersBox"
            @setCat="setCat"
            @setGoods="setGoods"
            :md="md"
            :filltersData="filltersData"
            :showFiltersGoodsState="showGoodsState"
            :yunList="yunLs"
            :tagsList="tagsLs"
            :top_num_screen="top_num_screen"
        >
        </filters>
        <div class="search-box">
            <div class="list-box" v-infinite-scroll="loadFun">
                <div class="list" v-if="list_data.length > 0">
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="cheproject(item)"
                    >
                        <div class="list-info">
                            <div class="img-box">
                                <img
                                    :src="item.imgs ? item.imgs : img_buf"
                                    alt=""
                                />
                            </div>
                            <div class="info-box">
                                <div class="title">
                                    <span>{{ item.title }}</span>
                                </div>
                                <div class="phone">
                                    <span>{{ item.txt_title }}</span>
                                </div>
                                <div class="tiem">
                                    <span>{{ item.price }}</span>
                                    <span
                                        class="f-num"
                                        v-if="item.fillingData"
                                        >{{ item.fillingData.number }}</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <empty v-else />
            </div>
        </div>
        <el-dialog title="开单" :visible.sync="is_bill" top="5vh">
            <popProjectFilling
                ref="popProjectFilling"
                @cancelFun="cancelFun"
                @fillingData="fillingData"
                @editData="editData"
            ></popProjectFilling>
        </el-dialog>
    </div>
</template>

<script>
import popProjectFilling from "./popProjectFilling.vue";
import staticConst from "../../js/const/StaticConst.js";
import config from "@/js/conf/Config.js";
import empty from "../comm/empty.vue";
import searchBoxAll from "@/components/comm/searchBoxAll.vue";
import filters from "../project/Goodsfilters.vue";
import catList from "@/js/gd/CatList.js";

export default {
    name: "popProjectSelect",
    props: ["top_num_search", "top_num_screen", "list_box_h", "customerid"],
    components: { popProjectFilling, empty, searchBoxAll, filters },
    data() {
        return {
            showGoodsState: true, //filters组件的状态过滤显示
            md: staticConst.YY_YY_KHKD,
            img_buf: staticConst.GOOD_IMG,
            filltersData: {
                cat: "类别",
            },
            yunLs: [],
            tagsLs: [],
            is_soll: false,
            is_bill: false, //打开开单弹框
            list_data: [],
            selectedData: [],

            selectedInfo: null,
            totalNum: 0,
            totalpic: 0,
            porstatus: "",
            searchform: {
                catid: "",
                page: "1",
                pnum: 20,
                pfrom: -20,
            },
            searchform2: {
                catid: "1",
                exact: "2",
                grade: 0,
                kw: "",
                objtype: "title",
                pfrom: 0,
                pnum: "20",
            },
            search_type_data: [], //搜索类型
            preselection_list: [], //搜索分类提示
            resultTips_list: [], //模糊搜索列表
            customer_list_data: [], //搜索结果
            select_name: "", //搜索类型名称
            total_num: 0, //搜到的数量
            cat_ls: [], //分类列表
            search_soll: false, //搜索列表滚动限制
            ucp_ls_data: [
                {
                    name: "全部服务",
                    uid: "",
                },
                {
                    name: "已选服务",
                    uid: "1",
                },
            ],

            propsdata: {
                children: "son",
                label: "title",
                value: "id",
                expandTrigger: "hover",
                checkStrictly: true,
            },
        };
    },
    methods: {
        initData() {
            this.is_bill = false;
            this.searchform.catid = "";
            this.porstatus = "";
            this.cat_ls = [];
            this.changeList();
            this.getSearchtypeList();
        },
        searchfocusFun() {
            this.$refs.searchBoxAll.focusFun();
        },
        getshowStatus() {
            return this.$refs.searchBoxAll.is_data_show_list;
        },
        setshowStatus() {
            this.$refs.searchBoxAll.searchFun();
        },
        /*** 分类搜索 ***/
        setCat(id) {
            this.searchform.catid = id;
            this.changeList();
        },
        setGoods(id) {
            if (id == 2) {
                this.list_data = [];
                this.is_soll = true;
            } else {
                this.changeList();
            }
        },
        // 切换搜索类型
        cheSelectvalue(item) {
            this.searchform2.objtype = item.code;
            this.search_type_data.map((v) => {
                if (item.code == v.code) {
                    v.is_acitve = true;
                    this.select_name = v.name;
                } else {
                    v.is_acitve = false;
                }
            });
        },
        // 关闭搜索状态
        closeFun() {
            this.searchform2.kw = "";
        },
        // 搜索结果列表滚动加载
        searchloadFun() {
            if (this.search_soll) return;
            this.searchform2.pfrom += 20;
            this.getsearchResultFun();
        },
        // 回车搜索
        accountLogin() {
            this.resetSearchData();
            this.getsearchResultFun();
        },
        // 选中模糊搜索结果
        resultTipsFun(item) {
            this.resetSearchData();
            this.searchform2.kw = item.title;
            this.getsearchResultFun();
        },
        // 搜索的分类筛选
        preselectionFun(item) {
            this.resetSearchData();
            this.searchform2.catid = item.id;
            this.searchform2.kw = item.title;
            this.getsearchResultFun();
        },
        resetSearchData() {
            this.searchform2.catid = "";
            this.total_num = 0;
            this.customer_list_data = [];
            this.searchform2.pfrom = 0;
            this.search_soll = false;
        },
        // 获取搜索结果
        async getsearchResultFun() {
            this.search_soll = true;
            let url = config.SEARCH_S_GOODS_YY;
            let param = {
                exact: this.searchform2.catid ? 2 : 1,
                grade: 0,
                customerid: this.customerid,
                kw: this.searchform2.catid ? "" : this.searchform2.kw,
                objtype: this.searchform2.objtype,
                catid: this.searchform2.catid,
                pfrom: this.searchform2.pfrom,
                pnum: "20",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.goods_ls) {
                res.data.goods_ls.map((v) => {
                    if (v.tagsInfo) {
                        v.tagsInfo.unshift(v.onsale == 1 ? "上架" : "下架");
                    } else {
                        v.tagsInfo = [v.onsale == 1 ? "上架" : "下架"];
                    }
                });

                this.customer_list_data = this.customer_list_data.concat(
                    res.data.goods_ls
                );
                setTimeout(() => {
                    this.search_soll = false;
                }, 200);
            } else {
                this.search_soll = true;
            }
            this.total_num = res.data.total;
        },
        // 搜索输入关键词
        async inputFun() {
            let url = config.SEARCH_S_OBJTYPE;
            let param = {
                ch: "xm",
                grade: 0,
                kw: this.searchform2.kw,
                objtype: this.searchform2.objtype,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.ls) {
                this.resultTips_list = res.data.ls;
            }
            this.total_num = res.data.total;
        },

        // 获取搜索方式列表
        async getSearchtypeList() {
            let url = config.SEARCH_S_OBJTYPE_LS;
            let param = { ch: "xm", grade: 0 };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.es_ls) {
                    res.data.es_ls.map((v) => {
                        v.is_acitve = false;
                    });
                    this.select_name = res.data.es_ls[0].name;
                    res.data.es_ls[0].is_acitve = true;
                    this.search_type_data = res.data.es_ls;
                }
                if (res.data.cat_ls) {
                    this.preselection_list = res.data.cat_ls;
                }
            }
        },
        // 搜索时关筛选
        showSelectFun() {
            // this.$refs.selectCustom1.is_select_show = false;
            // this.$refs.selectCustom2.is_select_show = false;
            // this.$refs.selectCustom3.is_select_show = false;
        },

        projectDetails(data) {
            this.is_bill = true;
            this.is_soll = true;
            let type = data.fillingForm ? "1" : "2";
            this.$nextTick(() => {
                this.$refs.popProjectFilling.initData(data, type, true);
            });
        },
        changePorstatus(val) {
            if (val == 1) {
                this.list_data = [];
                this.is_soll = true;
            } else {
                this.changeList();
            }
        },
        fillingData(data) {
            this.is_bill = false;
            this.determineFun(data.fillingData);
        },
        editData(data) {
            this.$emit("editData", data);
        },
        cancelFun() {
            if (this.is_bill) {
                this.is_bill = false;
            } else {
            }
        },
        // 确定服务选择
        determineFun(obj) {
            const data = {
                allCount: 0,
                customerid: this.customerid,
                spec_unit_ls_m: [obj],
                totalMoney: 0,
                type: "1",
            };
            this.$emit("getProjectData", data);
        },

        // 选中服务
        cheproject(item) {
            let type = item.fillingForm ? "1" : "2";
            const data = {
                porjectData: item,
                customerid: this.customerid,
                fillingForm: item.fillingForm || {},
            };
            this.is_bill = true;
            setTimeout(() => {
                this.$refs.popProjectFilling.initData(data, type);
            }, 100);
        },

        // 滚动加载
        loadFun() {
            if (this.is_soll) return;
            this.searchform.pfrom += 20;
            this.getlistdata();
        },

        // 筛选服务
        changeList() {
            this.emptyData();
            this.getlistdata();
        },

        // 获取服务列表
        async getlistdata() {
            this.is_soll = true;
            let url = config.YY_GOODSINFO_GOODS_LIST;
            let param = Object.assign({}, this.searchform);
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (
                    res.data.cat_ls &&
                    res.data.cat_ls &&
                    this.cat_ls.length == 0
                ) {
                    console.log(res.data,'showwiqlwlqwl')
                    catList.setList(res.data.cat_ls);
                }
                if (res.data.goods_ls) {
                    this.list_data = this.list_data.concat(res.data.goods_ls);
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
            }
        },

        // 清空数据
        emptyData() {
            this.searchform.pfrom = 0;
            this.list_data = [];
            this.selectedData = [];
            this.is_soll = false;
            this.totalNum = 0;
            this.totalpic = 0;
        },
    },
};
</script>

<style lang="scss" scoped>
.popProject-select {
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }
}
.dialog-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .num {
        font-size: 14px;
        span {
            margin-right: 10px;
        }
    }
}
.list-box {
    height: calc(100vh - 200px);
    overflow: auto;
    .list-row {
        padding: 10px;
        border-bottom: 1px #f2f2f2 solid;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        &:hover {
            background: #fdf6f6;
        }
        .list-info {
            display: flex;
            width: 100%;
            .img-box {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border-radius: 5px;
                background: #eaeaea;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                span {
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .info-box {
                width: calc(100% - 90px);
                .title {
                    font-size: 14px;
                }
                .phone {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 12px;
                    color: #9c9a9a;
                    margin: 5px 0;
                    span {
                        margin-right: 10px;
                    }
                }
                .tiem {
                    width: 100%;
                    font-size: 12px;
                    color: #fa4848;
                    display: flex;
                    justify-content: space-between;
                    .f-num {
                        padding: 0 20px;
                        background: #3388ff;
                        color: #fff;
                        font-size: 12px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .list-avitve {
            font-size: 20px;
            color: #3388ff;
        }
    }
}
.list-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.list-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: #ccc; //rgba(0, 0, 0, 0.0);
    scrollbar-arrow-color: red;
}
.list-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
}
</style>